<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <div id="demo"></div>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use("laypage", function () {
        var laypage = layui.laypage;
        laypage.render({
          elem: "demo",
          count: 100, // 总数
          limit: 5, // 每一页数量 默认10
          curr: location.hash.replace("#!fenye=", ""), // 起始页
          hash: "fenye", //自定义hash值
          groups: 6, // 连续出现的页码个数 默认 5
          prev: "<h2>上一页</h2>",
          next: "下一页了",
          first: "首页",
          last: "尾页",
          layout: ["count", "limit", "refresh", "skip", "prev", "page", "next"], // 自定义排版 默认 ['prev', 'page', 'next']
          // limits: [15, 25, 30, 40, 50], // 每页条数的选择项 配合 layout limit
          // theme: "#c00", // 主题
          // 切换分页的回调
          jump: function (obj, first) {
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            console.log(obj.limit); //得到每页显示的条数

            //首次不执行
            if (!first) {
              //do something
            }
          },
        });
      });
    </script>
  </body>
</html>
